<template>
	<view>
		<swiperTabber :tabar="tabBars" :tabIndex="tabIndex" :tabberStyle="{'border':'none'}" @tabtap="ontabtap"
		 :tabbarItemStyle="{'width':'33%','text-align':'center'}">
		</swiperTabber>
		<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">
				<scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore(index1)">
					<template v-if="tab.list.length>0">
						<block v-for="(item,index) in tab.list" :key="index">
							<friend-list :item="item"></friend-list>
						</block>
						<!-- 上拉加载 -->
						<loadMore :loadtext="tab.loadtext"></loadMore>
					</template>
					<template v-else>
						<!-- 默认无数据 -->
						<noThing></noThing>
					</template>

				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <block v-for="(item,index) in list">
			<friend-list :item="item"></friend-list>
		</block> -->

	</view>
</template>

<script>
	import swiperTabber from '../../components/index/swiper-tabbar.vue';
	import friendList from '../../components/friend/friend-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/common/no-thing.vue'
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [{
					name: '互关',
					id: 'guanzhu',
					num: '10'
				}, {
					name: '关注',
					id: 'tuijian',
					num: '10'
				}, {
					name: '粉丝',
					id: 'tiyu',
					num: '10'
				}],
				newsList: [{
						loadtext: '上拉加载更多',
						list: [{
								pictitle: '../../static/img/userpic/6.jpg',
								head: '幸福家园',
								age: 12,
								sex: 0, //0男 1nv
								isfollow: 1
							},
							{
								pictitle: '../../static/img/userpic/7.jpg',
								head: '大龄剩女',
								age: 38,
								sex: 1, //0男 1nv
								isfollow: 1
							},
							{
									pictitle: '../../static/img/userpic/8.jpg',
									head: '埃尔文化',
									age: 12,
									sex: 0, //0男 1nv
									isfollow: 1
								},
								{
									pictitle: '../../static/img/userpic/9.jpg',
									head: '悲鸣时',
									age: 32,
									sex: 1, //0男 1nv
									isfollow: 1
								},
								{
										pictitle: '../../static/img/userpic/8.jpg',
										head: '清风剑在手',
										age: 44,
										sex: 1, //0男 1nv
										isfollow: 1
									},
									{
										pictitle: '../../static/img/userpic/9.jpg',
										head: '南拳北腿',
										age: 32,
										sex: 1, //0男 1nv
										isfollow: 1
									},
									{
											pictitle: '../../static/img/userpic/8.jpg',
											head: '家常菜',
											age: 44,
											sex: 1, //0男 1nv
											isfollow: 1
										},
										{
											pictitle: '../../static/img/userpic/9.jpg',
											head: '程序猿',
											age: 32,
											sex: 1, //0男 1nv
											isfollow: 1
										}
						]
					},
					{
						loadtext: '上拉加载更多',
						list: [{
							pictitle: '../../static/img/userpic/7.jpg',
							head: '大龄剩女',
							age: 38,
							sex: 1, //0男 1nv
							isfollow: 0
						}, {
							pictitle: '../../static/img/userpic/7.jpg',
							head: '大龄剩女',
							age: 38,
							sex: 1, //0男 1nv
							isfollow: 0
						}]
					},
					{
						loadtext: '上拉加载更多',
						list: [{
								pictitle: '../../static/img/userpic/6.jpg',
								head: '幸福家园',
								age: 12,
								sex: 0, //0男 1nv
								isfollow: 1
							},
							{
								pictitle: '../../static/img/userpic/7.jpg',
								head: '大龄剩女',
								age: 38,
								sex: 1, //0男 1nv
								isfollow: 0
							}
						]
					}

				]

			}
		},
		methods: {
			//滑动改变
			tabchange(e) {
				this.tabIndex = e.detail.current;
			},
			//头部切换
			ontabtap(e){
				this.tabIndex = e;
			},
			loadMore(index) {
				console.log(index)
				if(this.newsList[index].loadtext!="上拉加载更多"){return}
				//修改状态
				this.newsList[index].loadtext="加载中...";
				setTimeout(()=>{
					//获取完成
					let obj={
								pictitle: '../../static/img/userpic/12.jpg',
								head: '冒泡泡',
								age: 30,
								sex: 1, //0男 1nv
								isfollow: 0
							}
					this.newsList[index].list.push(obj);
					this.newsList[index].loadtext="上拉加载更多"
				},1000)
				// this.newsList[index].loadtext="我也是有底线的"
			}
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e){
			if(e.index ==0){
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					console.log(res.screenHeight)
					let height = res.windowHeight - uni.upx2px(80)
					this.swiperHeight = height;
				}
			});
		},
		components: {
			swiperTabber,
			friendList,
			loadMore,
			noThing
		}
	}
</script>

<style>
.scroll-v {
	   height: 100%;
	}
	
</style>
